UI组件(傻瓜组件)和容器组件(容器组件)
新建TodoListUI文件，将TodoList中的render抽取在其中。成为一个UI组件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22import React, { Component } from 'react'
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd';
class TodoListUI extends Component {
render(){
return (
<div>
<Input value={ this.props.inputVlaue } onChange = { this.props.handleChange } placeholder="在此输入文本..." style={{ width:'300px', marginRight:'10px' }}/>
<Button type="primary" onClick={ this.props.handleBtnClick }>提交</Button>
<List
style={{ width:'300px', marginTop:'10px' }}
bordered
dataSource={ this.props.list }
renderItem={(item, index) => (<List.Item onClick= { (index) => this.props.handleBtnDelete(index) }>{item}</List.Item>)}
/>
</div>
)
}
}
export default TodoListUI;
TodoList成为一个容器组件，在容器组件中调用UI组件1
2
3
4
5
6
7
8
9
10
11render(){
return (
<TodoListUI
inputVlaue = { this.state.inputVlaue }
handleChange = { this.handleChange }
handleBtnClick = { this.handleBtnClick }
list = { this.state.list }
handleBtnDelete = { this.handleBtnDelete }
></TodoListUI>
)
}